
let recommen = document.getElementById('recommen')

function render(res) {   //动态创建页面

    res.result.forEach(item => {

        let div = document.createElement('a')
        div.href=`moneyproduct.html?a=${item.productId}`//内容区域最外层盒子
        div.id = "shop"
        let img = document.createElement("a")//图片放置
        // img.href=item.productInfo1//评论的超链接
        let textLeft = document.createElement("div") //右边放置产品信息的盒子
        let pTop = document.createElement('p')//右边盒子（上面）
        let span = document.createElement('span') //放置价格
        textLeft.id = "recommenLeft"
        span.innerHTML = `价格：${item.productPinkage}`
        span.style.color = "red"
        let pbottom = document.createElement('p')//右边盒子（下面）
        let b = document.createElement('a')//右下盒子放置评论
        // b.href="www.baidu.com"//评论的超链接
        b.style.fontWeight = "400"
        b.innerText = item.productComCount
        pbottom.id = 'b'
        img.innerHTML = item.productImg2
        pTop.innerHTML = item.productName;
        pbottom.innerHTML = `${item.productFrom} | ${item.productTime}`
        div.appendChild(img)
        textLeft.appendChild(pTop)
        pTop.appendChild(span)
        pbottom.appendChild(b)
        textLeft.appendChild(pbottom)
        div.appendChild(textLeft)
        recommen.appendChild(div)



    });



    
}




let num = 0
function fn(num ) {
    ajax({
        url: "http://chst.vip:1234/api/getmoneyctrl",
        data:{
            pageid:num
        },
        success(res) {
            render(res)
            // console.log(res.result);

            // res.result.forEach(item => {

            //     let div = document.createElement('a')
            //     div.href=`moneyproduct.html?a=${item.productId}`//内容区域最外层盒子
            //     div.id = "shop"
            //     let img = document.createElement("a")//图片放置
            //     // img.href=item.productInfo1//评论的超链接
            //     let textLeft = document.createElement("div") //右边放置产品信息的盒子
            //     let pTop = document.createElement('p')//右边盒子（上面）
            //     let span = document.createElement('span') //放置价格
            //     textLeft.id = "recommenLeft"
            //     span.innerHTML = `价格：${item.productPinkage}`
            //     span.style.color = "red"
            //     let pbottom = document.createElement('p')//右边盒子（下面）
            //     let b = document.createElement('a')//右下盒子放置评论
            //     // b.href="www.baidu.com"//评论的超链接
            //     b.style.fontWeight = "400"
            //     b.innerText = item.productComCount
            //     pbottom.id = 'b'
            //     img.innerHTML = item.productImg2
            //     pTop.innerHTML = item.productName;
            //     pbottom.innerHTML = `${item.productFrom} | ${item.productTime}`
            //     div.appendChild(img)
            //     textLeft.appendChild(pTop)
            //     pTop.appendChild(span)
            //     pbottom.appendChild(b)
            //     textLeft.appendChild(pbottom)
            //     div.appendChild(textLeft)
            //     recommen.appendChild(div)



            // });
        }
    })
} fn(num)
let btnright = document.getElementById('btnright')
let btnLeft = document.getElementById('btnLeft')
let page = document.getElementById('page')


btnLeft.disabled=true



//动态创建下拉页
    const getCart = () => ajax({ //
        url: "http://chst.vip:1234/api/getmoneyctrl",
    })
    
    getCart()
        .then(res => {
            let pagenum=Math.ceil( res.totalCount/res.pagesize)
            
            var html = ""
           for(var i=1;i<=pagenum;i++) { 
               
                html +=`
                <option value="">${i} /${pagenum}</option>
                `
            }
            page.innerHTML=html
           
           
            // num在最上面已给初始值0
            btnright.onclick = () => {  //下一页点击事件
                // console.log("btnr");
                // console.log(btnLeft);
                btnLeft.disabled=false
                recommen.innerHTML = ''
                num++
                if(num===pagenum-1){
                    btnright.disabled=true  //按钮变灰
                }
                if (num <pagenum) {
                    fn(num)
                    page[num].selected=true   //中间页码跟随当前属性被选中
                    console.log(num);
                } 
                
            }

            btnLeft.onclick = () => {  //上一页点击事件
           
                recommen.innerHTML = ''
                num--
                // console.log(num);
                btnright.disabled=false
                if(num===0){
                    btnLeft.disabled=true
                }
                if (num >=0) {
                    fn(num)
                   
                    page[num].selected=true
                } 
            }


            page.onchange = () => {   //页码选项事件
   
                btnLeft.disabled=false
                num =page.selectedIndex
                if(num===0){
                    btnLeft.disabled=true
                }
               if(num===pagenum-1){
                   btnright.disabled=true
               }else{
                btnright.disabled=false
               }
               
                console.log(num);
                
                recommen.innerHTML = ''
                fn(num)
               }

        })
  //返回顶部事件
        let btn=document.getElementById("btn")
document.querySelector('#recommen').onscroll = function() {
    btn.onclick = function() {

        //加入动画过度效果
    //         document.querySelector('#recommen').scrollTop = 0
    // let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let timer = setInterval(() => {
           document.querySelector('#recommen').scrollTop -=20
            if (document.querySelector('#recommen').scrollTop <= 0) {
                clearInterval(timer)
            }
        },10)
   
          
        }
    }
      